<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>登录页面</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/bootstrap/bootstrap.min.css">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/bootstrap/bootstrap-theme.min.css">
    <script src="/bootstrap/jquery-1.11.0.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/bootstrap/bootstrap.min.js"></script>
</head>

<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4" style="margin: 380px 380px">
                <div class="login-panel panel panel-default" style="margin-top:-130px">
                    <div class="panel-heading">
                        <h3 class="panel-title" style="text-align: center;">王者荣耀论坛管理后台</h3>
                    </div>
                                <div style="text-align: center;color: red">{{mess.message}}</div>
                    <div class="panel-body">
                        <div id="errorMsg" class="alert alert-danger"></div>
                        <form role="form" method="post" id="login_form">
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="用户名" v-model="user.username" autofocus>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="密码" v-model="user.userpass" type="password">
                                </div>
                                <!-- Change this to a button or input when using this as a form -->
                                <!--<a href="javascript:void(0)" class="btn btn-lg btn-success btn-block" id='login_btn'>登录</a>-->
                                <input type="button" id="btn_sub" class="btn btn-lg btn-success btn-block" value="登录" @click="manageLogin()" >
                            </fieldset>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>

<script>
   new Vue({
        el:'#app',
        data:{
             user:{
                 username:"",
                 userpass:"",
             },
            mess:{}
        },

        methods:{
            manageLogin(){

                axios.post(`/user/manageLogin.do`,this.user).then(response=>{

                   this.mess = response.data;
                    if (this.mess.success){
                        window.location = "/jsp/UserPage.jsp";
                    }
                })
            }
        },
    });
</script>
</body>
</html>
